<template>
  <div class="mask">
    <div class="box">
      <p class="p1">
      <div class="line"></div>
      <h2>编辑班组</h2>
      <el-icon @click="close">
        <close-bold />
      </el-icon>
      </p>
      <div class="mbox">
        <el-form :model="form">
          <el-form-item label="劳务班组" :rules="[{ required: true }]">
            <el-input style="width: 300px; height: 40px" placeholder="请输入劳务班组名称" v-model="form.laowu"></el-input>
          </el-form-item>
          <el-form-item label="所属项目" :rules="[{ required: true }]">
            <el-select placeholder="XXXXX项目" style="width: 300px; height: 40px;font-weight: 800;">
              <el-option label="XXXXX项目"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属承建商" :rules="[{ required: true }]">
            <el-select placeholder="中建八局" style="width: 300px; height: 40px">
              <el-option label="中建八局"></el-option>
              <el-option label="总包单位"></el-option>
              <el-option label="分包单位"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班组组长" :rules="[{ required: true }]">
            <el-input style="width: 300px; height: 40px" placeholder="请输入项目负责人" v-model="form.zuzhang"></el-input>
          </el-form-item>


          <el-form-item label="身份证" :rules="[{ required: true }]">
            <el-select placeholder="身份证" style="width: 122px; height: 40px" clearable>
              <el-option v-for="item in icard" :key="item" :label="item" :value="item"></el-option>

            </el-select>
            <el-input style="width: 300px; height: 40px" placeholder="请输入证件号" v-model="form.card"></el-input>
          </el-form-item>
          <el-form-item label="联系手机" :rules="[{ required: true }]">
            <el-input style="width: 300px; height: 40px" placeholder="请输入联系手机" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="进场日期" :rules="[{ required: true }]">
            <el-date-picker v-model="form.enterdate" type="date" placeholder="请选择进场日期" style="width: 300px; height: 40px" value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="退场日期" :rules="[{ required: true }]">
            <el-date-picker v-model="form.godate" type="date" placeholder="请选择退场日期" style="width: 300px; height: 40px" value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <hr />
      <div class="but">
        <el-form-item>
          <el-button type="primary" @click="saveFn" style="background-color: #FF9900; border: none;">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { CloseBold } from "@element-plus/icons";
import { reactive, watch } from "vue";
import service from "../../../utils/service";
import { useRouter } from "vue-router";
const icard = reactive(["身份证", "护照", "其他"]);

const $router = useRouter();
// 声明属性
const props = defineProps<{
  id: string;
}>();
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};
interface Iform {
  id: any;
  laowu: string;
  zuzhang: string;
  card: string;
  phone: string;
  nums: string;
  status: string;
  enterdate: string;
  godate: string;

}

const form = reactive<Iform>({
  id: "8",
  laowu: "",
  zuzhang: "",
  card: "",
  phone: "",
  nums: "",
  status: "",
  enterdate: "",
  godate: "",
});
// 获取当前数组数据
const getinfo = () => {
  service({
    url: "/classlist",
    params: {
      id: props.id,
    },
  }).then((res) => {
    console.log(res);
    form.laowu = res.data[0].laowu;
    form.zuzhang = res.data[0].zuzhang;
    form.card = res.data[0].card;
    form.phone = res.data[0].phone;
    form.enterdate = res.data[0].enterdate;
    form.godate = res.data[0].godate;

  });
};
watch(
  props,
  () => {
    getinfo();
    form.laowu = "";
  },
  {
    deep: true,
  }
);


// 编辑保存提交数据
const saveFn = () => {
  if (!form.laowu) {
    ElMessage({
      message: "修改数据为空",
      type: "warning",
    });
  }
  form.id++,
  service({
    url: "/classlist/" + props.id,
    method: "patch",
    data: form,
  }).then((res) => {
    if (form.laowu) {
      ElMessage({
        message: "修改成功！",
        type: "success",
      });
      emit("hide");
      emit("updatesuccess");
      $router.push("/mpage/classmange");
    }



  });
}
</script>

<style scoped>
.mask {
 /* 遮罩层的写法 */
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.box {
  width: 939px;
  height: 626px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  /* overflow: auto; */
}

.line {

  position: absolute;
  left: 0px;
  top: 10px;
  width: 5px;
  height: 22px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2 {
  font-size: 16px;
  color: #666666;
  font-weight: 800;
  margin-top: 8px;
  margin-left: 16px;

}

.but {
  margin-top: 10px;
  margin-left: 700px;
}

.mbox {
  width: 800px;
  height: 500px;
  margin-left: 50px;
}

.el-form-item__content {
  width: 436px;
  height: 40px;
}
</style>